<template>
  <a-drawer
    title="排班周期设置"
    :visible="visible"
    :width="600"
    :body-style="{
      paddingBottom: '60px',
      height: 'calc(100% - 55px)',
    }"
    @close="onClose"
  >
    <section class="content">
      <a-form layout="vertical">
        <a-form-item label="周期名称" v-bind="validateInfos.cycle_name">
          <a-input
            v-model:value="modelRef.cycle_name"
            placeholder="请输入周期名称"
          />
        </a-form-item>
        <a-form-item label="每个周期天数">
          <a-input-number
            v-model:value="modelRef.cycle_days"
            :min="2"
            @change="handleCycleDaysChange"
            style="width: 300px"
          />
        </a-form-item>
        <template v-for="(item, index) of modelRef.cycle_list" :key="index">
          <a-form-item>
            <template #label> 第{{ index + 1 }}天 </template>
            <a-select
              :options="
                shiftList.map((item) => ({
                  label: item.shift_name,
                  value: item.id,
                }))
              "
              v-model:value="item.shift_id"
            ></a-select>
            <!-- @select="(val, opt) => handleShiftSelecet(opt, item)" -->
          </a-form-item>
        </template>
      </a-form>
    </section>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="onClose">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit"> 保存 </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "SetShiftCycle",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
    shiftList: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const state = reactive({});

    const handleCycleDaysChange = (value) => {
      let diff = value - modelRef.cycle_list.length;
      if (diff > 0) {
        // 新增
        for (let i = 1; i <= diff; i++) {
          modelRef.cycle_list.push({
            day: modelRef.cycle_list.length + 1,
            shift_id: 0,
            // shift_name: "休息",
          });
        }
      } else {
        diff = diff * -1;
        modelRef.cycle_list.splice(modelRef.cycle_list.length - diff, diff);
      }
    };

    // const handleShiftSelecet = (option, current) => {
    //   current.shift_name = option.label;
    // };

    const modelRef = reactive({
      cycle_name: "",
      cycle_days: 2,
      cycle_list: [
        { day: 1, shift_id: 0 },
        { day: 2, shift_id: 0 },
      ],
    });
    const requiredRule = [{ required: true, message: "必填项" }];
    const rulesRef = reactive({
      cycle_name: requiredRule,
    });
    const { validate, validateInfos } = useForm(modelRef, rulesRef);

    const onSubmit = () => {
      validate().then(() => {
        emit("success", {
          detail: modelRef,
        });
      });
    };

    const onClose = () => {
      emit("cancel");
    };

    watch(
      () => props.visible,
      (val) => {
        if (val && Object.keys(props.detail).length) {
          for (let key in props.detail) {
            modelRef[key] = props.detail[key];
          }
        }
      }
    );
    return {
      modelRef,
      validateInfos,
      ...toRefs(state),
      onClose,
      onSubmit,
      handleCycleDaysChange,
      // handleShiftSelecet,
    };
  },
});

const timeDetail1 = [
  {
    start: "09:00",
    end: "18:00",
    startNextDay: false,
    endNextDay: false,
  },
];
const timeDetail2 = [
  {
    start: "09:00",
    end: "11:30",
    startNextDay: false,
    endNextDay: false,
  },
  {
    start: "13:30",
    end: "17:30",
    startNextDay: false,
    endNextDay: false,
  },
];
const timeDetail3 = [
  {
    start: "09:00",
    end: "11:30",
    startNextDay: false,
    endNextDay: false,
  },
  {
    start: "13:30",
    end: "17:30",
    startNextDay: false,
    endNextDay: false,
  },
  {
    start: "19:30",
    end: "20:00",
    startNextDay: false,
    endNextDay: false,
  },
];
const timeDetail = [timeDetail1, timeDetail2, timeDetail3];
</script>

<style scoped>
.content {
  height: 100%;
  overflow: hidden auto;
}
</style>
